<template>
  <div class="video-warp">
    <d-player class="video" ref="player" :options="options" @ended="end" @seeking="progress" @timeupdate="time"></d-player>
  </div>
</template>

<script lang="ts">
export default {
  data() {
    return {
      maxProgress:0,
      player: null,
      options: {
        autoplay:true,
    container: document.getElementById("dplayer"),   //播放器容器
    mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
    theme: "#FF5F19", // 风格颜色，例如播放条，音量条的颜色
    loop: false, // 是否自动循环
    lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
    // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
    hotkey: true, // 是否支持热键，调节音量，播放，暂停等
    preload: "auto", // 自动预加载
    volume: 1, // 初始化音量
    playbackSpeed: [1], //可选的播放速度，可自定义
    // logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左角上打一个logo
    video: {
      url: "", // 播放视频的路径
      quality: [
    //     // 设置多个质量的视频
        // {
        //   name: "流畅",
        //   url: "",
        //   type: "auto", // 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或 其他自定义类型
        // },
        // {
        //   name: "标清",
        //   url:"",
        //   type: "auto",
        // },
        {
          name: "原画",
          url:"",
          type: "auto",
        },
      ],
      defaultQuality: 0, // 默认是高清
      pic: "", // 视频封面图片
      thumbnails: "", // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
    },
    // subtitle: {   //字幕
    //   url: "",   //字幕网址
    //   color:'#fff' 字幕颜色
    //   fontSize: "20px",
    //   bottom: "40px",
    // },
    // danmaku: {
    //   // 弹幕
    //   id: "9E2E3368B56CDBB4",
    //   api: "https://api.prprpr.me/dplayer/",
    //   token: "tokendemo", //后端验证令牌
    //   maximum: 1000, //弹幕最大数量
    //   addition: ["https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142"], //其他弹幕
    //   user: "DIYgod", //弹幕用户名
    //   bottom: "15%", //值，例如：10px，10％，即弹幕底部和播放器底部之间的距离，以防止遮挡字幕
    //   unlimited: true, //即使弹幕重叠也显示所有弹幕
    // },
    // contextmenu: [
    //   //  自定义上下文菜单
    //   // 右键菜单
    //   {
    //     text: "custom1",
    //     link: "https://www.bilibili.com",
    //   },
    //   {
    //     text: "custom2",
    //     click: (player) => {
    //       console.log(player);
    //     },
    //   },
    // ],
    // highlight: [
    //   //进度条上的自定义时间标记
    //   // 进度条时间点高亮
    //   {
    //     text: "10M",
    //     time: 6,
    //   },
    //   {
    //     text: "20M",
    //     time: 12,
    //   },
    // ],
},
            
    };
  },
mounted(){
    this.player = this.$refs.player.dp;
    this.$nextTick(()=>{

          // document.querySelector(".dplayer-mask").remove();
    // document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
    // let length = document.querySelectorAll(".dplayer-menu-item").length;
   
    document.querySelectorAll(".dplayer-menu")[0].remove(); // 去掉右键扩展
    // document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
    })
      

},
  methods: {
      time(){
        if(this.player.video){
          console.log('time')

          this.maxProgress = this.maxProgress>=this.player.video.currentTime ?this.maxProgress:this.player.video.currentTime
        }
          
      },
      progress(){
        console.log('progress')
        console.log(this.maxProgress)
        console.log(this.player.video.currentTime)
          if(this.player.video.currentTime >this.maxProgress){
            this.player.video.currentTime = this.maxProgress
          }
      
      },
      videoType(definition){
        switch(definition){
          case "FD":return "流畅";
          case "LD":return "标清";
          case "SD":return "高清";
          case "HD":return "超清";
          case "OD":return "原画";
          case "2K":return "2K";
          case "4K":return "4K";
          case "SQ":return "普通音质";
          case "HQ":return "高音质";
          case "AUTO":return "自动";
        }
      },
      formatVideoList(pathList){
          const videoList = pathList.map(videoItem=>{
            return {
              name:this.videoType(videoItem.definition),
              url:videoItem.playURL,
              type:'auto'
            }
          })
          return {
            url:pathList[0].playURL,
              name:this.videoType(pathList[0].definition),
            quality:videoList
          }
      },
      // 切换视频
      switchHandle (pathList) {
       
        if (pathList.length > 0) {
    
          this.player.switchVideo({
           // 改变当前视频路径为 vue 的静态资源存放路径.
           // vue 2.x ：video/xx.mp4;
           // vue 1.x : static/video/xx.mp4
           name:this.videoType(pathList[0].definition),
            url : pathList[0].playURL,
            type : 'auto'
          })
          this.options.video = this.formatVideoList(pathList)
          this.player.play()
      
            
        }
      },
      end(){
        this.$emit('playEnd');
     
      }

  },
};
</script>

<style lang="scss" scoped>
.video-warp{
  width:100%;
   
}
.video {
  width: 100%;
  height:100%;
}
</style>